<template>
  <el-form
    ref="form"
    :model="form"
    label-width="80px"
    style="width: 50%; margin: 30px auto"
  >
    <el-form-item label="反馈标题">
      <el-input v-model="form.title" />
    </el-form-item>
    <el-form-item label="反馈内容">
      <el-input v-model="form.content" />
    </el-form-item>
    <el-form-item label="上传图片">
      <el-upload
        class="upload-demo"
        action="/resource/messages"
        :file-list="fileList"
        :on-preview="handlePictureCardPreview"
        :on-remove="handleRemove"
        list-type="picture"
        :on-success="list"
      >
        <el-button size="small" type="primary">点击上传</el-button>
        <div slot="tip" class="el-upload__tip">
          只能上传jpg/png文件，且不超过500kb
        </div>
      </el-upload>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="addHandle">提交</el-button>
      <el-button type="primary" @click="backHandle">返回</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import service from '../../api/messages'
export default {
  name: 'Messages',
  data() {
    return {
      fileList: [],
      dialogImageUrl: '',
      dialogVisible: false,
      form: {
        title: '',
        content: '',
        people: '60a1c9b3cf67854d54c565eb'
      }
    }
  },
  mounted() {},
  methods: {
    // 提交
    addHandle() {
      console.log(this.fileList)
      console.log(this.dialogImageUrl)
      service
        .addMessage({
          title: this.form.title,
          content: this.form.content,
          user: this.form.people,
          images: this.fileList,
          reply: '',
          replyTime: ''
        })
        .then(() => {
          this.$router.push('/messages/index')
        })
    },
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    list(response) {
      this.fileList.push(response.url)
    },
    // 返回
    backHandle() {
      this.$router.push('/messages/index')
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
